<template>
  <div id="home">
    <!-- 头部标题 -->
    <nav-bar><div slot="nav-center">购物街</div></nav-bar>
    <tab-control :title="title" 
                  ref="tabControl1" 
                  @tabclick="tabclick" 
                  class="tab-control"
                  v-show="isTopFixed"/>
    <!-- 内容 -->
    <scroll class="content" 
            ref="scroll" 
            @iscroll="contentsroll" 
            :probe-type="3"
            :pull-up-load="true"
            @pullingUp="loadMore"
            >
      <!-- 轮播图 -->
      <swiper :banners="banners" @swiperImageLoad="swiperImageLoad"/>
      <!-- 推荐内容 -->
      <recommend-view :recommends="recommends"/>
      <!-- 本周流行 -->
      <feature-view/>
      <!-- 商品类型 -->
      <tab-control :title="title" ref="tabControl2" @tabclick="tabclick"/>
      <!-- 展示商品 -->
      <goods-list :goods="showshopping" />
    </scroll>
    <back-top @click.native="backclick" v-show="isbacktop"/>
  </div>
</template>

<script>
  
  import Swiper from './childComps/Homeswiper'
  import RecommendView from './childComps/HomeRecommendView.vue'
  import FeatureView from './childComps/FeatureView.vue'

  import NavBar from '@/components/common/navbar/NavBar.vue'
  import TabControl from '@/components/content/tabControl/TabControl.vue'
  import GoodsList from '../../components/content/goods/GoodsList.vue'
  import Scroll from '../../components/common/scroll/Scroll.vue'

  import {getHomeMultidata, getHomeGoods} from '../../network/home.js'
  import {itemListenerMixin, backTopMixin} from '../../common/mimin.js';

  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      NavBar,
      Swiper,
      RecommendView,
      FeatureView,
      TabControl,
      GoodsList,
      Scroll,
    },
    props: {},
    mixins:[itemListenerMixin, backTopMixin],
    data() {
    //这里存放数据
    return {
      banners: [],
      recommends: [],
      title: ['流行','新款','精选'],
      goods: {
        'pop': {page: 0, list: []},
        'new': {page: 0, list: []},
        'sell': {page:0, list: []}
      },
      currenType:'pop',
      taboffsetTop: 0,
      isTopFixed: false,
      saveY:0,

    };
    },
    //计算属性 类似于data概念
    computed: {
      showshopping(){
        return this.goods[this.currenType].list;
      }
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
       /***
       * 事件监听相关方法
       */
      tabclick(index){
         /**订单类型选择 */
        switch (index) {
          case 0:
            this.currenType = 'pop';
            break;
          case 1:
              this.currenType = 'new';
              break;
          case 2:
              this.currenType = 'sell';
              break;
        }
        this.$refs.tabControl1.activeindex = index;
        this.$refs.tabControl2.activeindex = index;
      },
     
      contentsroll(postion){
        /**监听滚动返回顶部按钮显示状态 */
        //1.判断BackTop是否显示
        this.showBackTop(postion)

        //2.决定tabControl是否吸顶
        this.isTopFixed = (-postion.y) > this.taboffsetTop;
      },
      loadMore(){
        // /**上拉加载 */
        this.getHomeGoods(this.currenType);
      },
      swiperImageLoad(){
        //获取tabControl的offsetTop
        this.taboffsetTop = this.$refs.tabControl2.$el.offsetTop;
      },

      /**
       * 网络请求相关方法
       */
      
      getHomeMultidata(){
         /**请求轮播图和推荐内容 */
         getHomeMultidata().then(res => {
          // console.log(res);
          this.banners=res.data.data.banner.list;
          this.recommends=res.data.data.recommend.list;
          // console.log(this.recommends);
        })
      },
      getHomeGoods(type){
        /**请求商品内容 */
        const page= this.goods[type].page+1;
        getHomeGoods(type, page).then(res =>{
          // console.log(res);
          this.goods[type].list.push(...res.data.data.list);
          this.goods[type].page+= 1;
         
          //当上拉加载数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载
          this.$refs.scroll.finishPullUp();
        })
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      
      //1.请求多个数据
      this.getHomeMultidata();
      //2.请求商品数据
      this.getHomeGoods('pop');
      this.getHomeGoods('new');
      this.getHomeGoods('sell');
      
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {
      this.$refs.scroll.scrollTo(0,this.saveY,0);
      this.$refs.scroll.refresh();
    }, //如果页面有keep-alive缓存功能，这个函数会触发,从其页面跳转回来，触发缓存内容
    deactivated() {
      // console.log(this.$refs.scroll.scroll.y);
      //1.保存了y值
      this.saveY = this.$refs.scroll.getScrollY();
      //2.取消全局事件监听
      this.$bus.$off('itemImageLoad',this.itemImgListenner);
    } //如果页面离开则触发这个函数
  }
</script>
<style scoped>
#home{
    position: relative;
    height: 100vh;
    padding-top: 2.75rem;
}
#navbar{
    background-color: var(--color-tint);
    color: var(--color-background);
}
.tab-control{
    position: relative;
    z-index: 9;
}
.content{
    position: absolute;
    top: 2.75rem;
    bottom: 3.0625rem;
    left: 0;
    right: 0;
    overflow: hidden;
}
/* .content{
  height: calc(100% - 93px);
  overflow: hidden;
  margin-top: 44px;
} */
</style>